<template>
  <a-drawer
    :visible="vdata.visible"
    :title=" vdata.isAdd ? '新增商圈' : '修改机构经纬度信息'"
    width="40%"
    :body-style="{ paddingBottom: '50px' }"
    :maskClosable="false"
    @close="onClose"
  >
    <a-form ref="infoFormModel" :model="vdata.saveObject" layout="vertical" :rules="vdata.rules" :wrapper-col="{span: 22}">
      <!-- 引入地图组件  -->
      <GzAmap ref="gzAmapRef" />
      <a-divider />
      <!-- <a-row>
        <a-col :span="24">
          <a-form-item label="辐射范围" name="radius">
            <a-input-number v-model:value="vdata.saveObject['radius']" :step="100" addon-before="距离商圈中心点" addon-after="米" />
          </a-form-item>
        </a-col>
      </a-row> -->
    </a-form>
  
    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" @click="onClose"><close-outlined />取消</a-button>
      <a-button type="primary" :loading="vdata.btnLoading" @click="onSubmit"><check-outlined />保存</a-button>
    </div>
  </a-drawer>
</template>
  
  <script setup lang="ts">
  import{$addorUpdataBusiness,$getBusinessInfo,}from '@/api/businessCircle/index'
  import {$apiAgentInfoDetail,$apiAgentInfoUpdateInfo} from '@/api/proxy/ProxyList/index'
  import {ref, reactive, nextTick, getCurrentInstance} from 'vue'
  const { $infoBox  } = getCurrentInstance()!.appContext.config.globalProperties
  
  const props = defineProps({
    callbackFunc: { type: Function, default: () => () => ({}) }
  })
    
  const vdata : any =  reactive({
    isAdd: true, // 新增 or 修改
    visible: false, // 抽屉开关
    saveObject: {}, // 数据对象
    btnLoading:false,
    plainOptions:[
      {label:'省级权限',value:'1'},
      {label:'市级权限',value:'2'},
      {label:'区县级权限',value:'3'},
      {label:'网点权限',value:'4'},
      {label:'客户经理权限',value:'5'}
    ],
    rules: {
      agentNo: [{ required: true, message: '请选择归属机构', trigger: 'blur' }],
      groupName: [{ required: true, message: '请输入商圈名称', trigger: 'blur' }],
      groupType: [{ required: true, message: '请选择商圈类型', trigger: 'blur' }],
      groupImg: [{ required: true, message: '请上传商圈头像', trigger: 'blur' }],
      radius: [{ required: true, message: '请输入辐射范围', trigger: 'blur' }],
      hasImport: [{ required: true, message: '请选择导入权限', trigger: 'blur' }],
      state: [{ required: true, message: '请选择类型', trigger: 'blur' }],
    }
  })
  
  // 表单组件
  const infoFormModel = ref()
  const gzAmapRef = ref()
  
  // 抽屉显示
  const show = (agentNo) => {
    console.log('appId', agentNo)
    
    vdata.isAdd = !agentNo
    vdata.agentNo = agentNo
    // 数据清空--添加默认值
    vdata.saveObject = {
      'state': 1,
      radius:1500,
      // hasImport:['1','2','3','4','5']
    }
  
    if (infoFormModel.value !== undefined) {
      infoFormModel.value.resetFields()
    }
  
    let initMapData : any = {}
  
    if (!vdata.isAdd) { // 修改信息 延迟展示弹层
        console.log('走的是修改22222')
      // 拉取详情
      $apiAgentInfoDetail({ agentNo: agentNo }).then(res => {
        console.log(res,'地图信息')
        // 商圈的位置信息包含了区域编码
        if(res.areaCode && res.areaCode.length){
          initMapData.areacode = JSON.parse(res.areaName)
          initMapData.lnglat = res.lng + ',' + res.lat
          initMapData.address = res.addr
          initMapData.areacodeNames = JSON.parse(res.areaName)
        }
  
        // 显示地图信息
        nextTick(() => gzAmapRef.value.init(initMapData))
        vdata.saveObject={
          // sqlxNo: 'SQLX00001',
          // sqlxName: '商业综合体',
          // state:1,
          ...res
        }
      })
      vdata.visible = true
    } else {
  
      vdata.visible = true // 展示弹层信息
      // 显示地图信息
      nextTick(() => gzAmapRef.value.init(initMapData))
    }
  
  }
  // 表单提交
  const onSubmit = () => {
    let mapData = gzAmapRef.value.getMapData()
    if (!mapData || mapData.areacode.length == 0 || !mapData.address || !mapData.lnglat) {
      return $infoBox.message.error('请选择地理位置')
    }
    if (mapData.lnglat.indexOf(',') < 0) {
      return $infoBox.message.error('请输入正确的经纬度')
    }
    vdata.saveObject.lng = mapData.lnglat.split(',')[0]
    vdata.saveObject.lat = mapData.lnglat.split(',')[1]
    vdata.saveObject.location ={
      longitude:mapData.lnglat.split(',')[0],
      latitude:mapData.lnglat.split(',')[1]
    }
    // vdata.saveObject.lng = mapData.lnglat.split(',')[0]
    // vdata.saveObject.lat = mapData.lnglat.split(',')[1]
    vdata.saveObject.addr = mapData.address
    vdata.saveObject.areaCode = JSON.stringify(mapData.areacode)
    vdata.saveObject.areaName = JSON.stringify(mapData.areacodeNames)
    console.log('vdata.saveObject',vdata.saveObject)
    
    infoFormModel.value.validate().then(() => {
  
      vdata.btnLoading = true
      let reqObject = Object.assign({}, vdata.saveObject) // 请求数据
      console.log('reqObjectreqObject',reqObject)
      let URL = vdata.isAdd ? '/api/mchGroup/save' : '/api/mchGroup/update'
      $apiAgentInfoUpdateInfo(reqObject).then(res => {
        vdata.visible = false
        props.callbackFunc() // 刷新列表
        vdata.btnLoading = false
      }).finally(() => {
         vdata.btnLoading = false
      })
    })
  }
  
  
  const onClose = () => {
    vdata.visible = false
  }
  
  defineExpose({ show })
  </script>
  
  